<template>
	<div id="tmpl">
	<!-- 实现图片详情和缩略图 -->
		<div id="desc">
			<!-- 图片详情-标题 -->
			<div class="title">
				<h4>{{photoinfo.title}}</h4>
				<p>{{photoinfo.add_time | datefmt('YYYY-MM-DD HH:mm:ss')}} {{photoinfo.click}}次浏览</p>
				<p class="line"></p>
			</div>

			<!-- 缩略图 -->
			<vue-images :imgs="images"
                        :modalclose="modalclose"
                        :keyinput="keyinput"
                        :mousescroll="mousescroll"
                        :showclosebutton="showclosebutton"
                        :showcaption="showcaption"
                        :imagecountseparator="imagecountseparator"
                        :showimagecount="showimagecount"
                        :showthumbnails="showthumbnails">
                </vue-images>
			<!-- 图片详情-摘要部分 -->
			<p v-html='photoinfo.content'></p>
		</div>

		<!-- 集成评论组件 -->
		<div id="comment">
			<comment :id='id'></comment>
		</div>
	</div>
</template>

<script>
	//导入缩略图组件
	import vueImages from 'vue-images';
	import comment from '../../components/subcom/comment.vue';
	export default{
		components:{
			//缩略图组件
			vueImages,
			comment
		},
		data(){
			return {
				id:0,
				photoinfo:{},
				images:[],
				modalclose: true,
		        keyinput: true,
		        mousescroll: true,
		        showclosebutton: true,
		        showcaption: true,
		        imagecountseparator: '/',
		        showimagecount: true,
		        showthumbnails: true
			}
		},
		created(){
			this.id = this.$route.params.id;
			this.getinfo();
			this.getimgs();
		},
		methods:{
			getinfo(){
				var url = this.common.apidomain+'/api/getimageInfo/'+this.id;
				this.$http.get(url).then(function(res){
					if(res.body.status != 0){
						this.common.Toast(res.body.message);
						return;
					}
					this.photoinfo = res.body.message[0];
				})
			},
			getimgs(){
				var url = this.common.apidomain+'/api/getthumimages/'+this.id;
				this.$http.get(url).then(function(res){
					if(res.body.status != 0){
						this.common.Toast(res.body.message);
						return;
					}
					res.body.message.forEach(function(item,index){
						var img = document.createElement('img');
						img.src = item.src;
						item.imageUrl = img.src;
						item.caption = '';
					});
					this.images = res.body.message;
				})
			}
		}
	}
</script>

<style scoped>
	/*图片详情样式*/
    #desc{
	    padding: 10px;
    }
	#desc  .title h4{
		color: #0094ff;
	}

    #desc .title p{
	    color:rgba(0,0,0,0.4);
	    margin-top: 10px;
    }

    #desc .title .line{
	    width: 100%;
	    height: 1px;
	    border-bottom: 1px solid rgba(0,0,0,0.4);
    }
</style>